<div class="container">
    <div class="logoDiv">
      <div>
        <img class="logoImg" src="assets/images/login_logo.png" alt="logo">
      </div>
      <div style="text-align:right;">
        <img class="logoImg2" src="assets/images/chahua.png" alt="logo">
      </div>
    </div>

    <div class="login_div">
      <div class="form-div">
          <div class="top-login">注册</div>
          <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">公司名称</nz-form-label>
              <nz-form-control [nzSm]="18" [nzXs]="24">
                  <div nz-row [nzGutter]="8">
                      <div nz-col [nzSpan]="24">
                        <input type="text" nz-input formControlName="name" (focus)="nameOnFocus()" (blur)="checkName()" placeholder="请输入公司名称">
                      </div>
                      <div nz-col [nzSpan]="9" style="margin-left:-125px;">
                        <nz-form-explain style="margin-top: 9px;" *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入公司名称!</nz-form-explain>
                        <nz-form-explain style="margin-top: 9px;" class="checkResult" *ngIf="checkComName==601">该公司名称已被注册!</nz-form-explain>
                      </div>
                  </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>
                  <span>
                    营业执照
                    <i nz-icon nz-tooltip nzTitle="点击上传图片右侧可删除当前上传图片" type="question-circle" theme="outline"></i>
                  </span>
                </nz-form-label>
                <nz-form-control [nzSm]="18" [nzXs]="24">
                  <div nz-row [nzGutter]="8">
                      <div nz-col [nzSpan]="24">
                        <nz-upload class="upload"
                          [nzSize]="'large'"
                          nzMultiple
                          [nzLimit]="1"
                          [nzFilter]="filters"
                          [nzFileList]="fileList"
                          (nzChange)="licenseChange($event)"
                          nzAction="{{licenseImg}}">
                          <div class="upload-btn">
                            <i nz-icon type="upload"></i><span style="margin-left:8px;">上传营业执照</span>
                          </div>
                        </nz-upload>
                      </div>
                      <div nz-col [nzSpan]="9" style="margin-left:-125px;">
                        <nz-form-explain style="margin-top: 9px;" class="checkResult" *ngIf="uploadCode == -1">请上传图片!</nz-form-explain>
                      </div>
                    </div>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="phoneNumber">联系手机号</nz-form-label>
              <nz-form-control [nzSm]="18" [nzXs]="24">
                  <div nz-row [nzGutter]="8">
                      <div nz-col [nzSpan]="24">
                          <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                              <ng-template #addOnBeforeTemplate>
                                <nz-select formControlName="phoneNumberPrefix" style="width: 70px;">
                                  <nz-option nzLabel="+86" nzValue="+86"></nz-option>
                                  <nz-option nzLabel="+87" nzValue="+87"></nz-option>
                                </nz-select>
                              </ng-template>
                              <input nz-input type="text" formControlName="phoneNumber" id="mobile" (blur)="checkMobile()" (focus)="clearCheckMobile()" placeholder="请输入联系手机号">
                          </nz-input-group>
                      </div>
                      <div nz-col [nzSpan]="9" style="margin-left:-125px;">
                        <nz-form-explain style="margin-top: 9px;" *ngIf="validateForm.get('phoneNumber').dirty && validateForm.get('phoneNumber').errors">
                          <ng-container *ngIf="validateForm.get('phoneNumber').hasError('required')">
                              请输入手机号!
                          </ng-container>
                          <ng-container *ngIf="validateForm.get('phoneNumber').hasError('confirm')">
                              手机号不正确!
                          </ng-container>
                        </nz-form-explain>
                      </div>
                  </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>选择地区</nz-form-label>
                <nz-form-control [nzSm]="18" [nzXs]="24">
                  <div nz-row [nzGutter]="8">
                      <div nz-col [nzSpan]="24">
                        <nz-cascader style="background: #E2E3EA;text-align:left;" [nzSize]="'large'" [nzOptions]="nzOptions" [nzShowSearch]="true" [(ngModel)]="values" [ngModelOptions]="{standalone: true}" (ngModelChange)="onChanges($event)"></nz-cascader>
                      </div>
                      <div nz-col [nzSpan]="9" style="margin-left:-125px;">
                        <nz-form-explain style="margin-top: 9px;" class="checkResult" *ngIf="selectArea ==-1">请选择地区!</nz-form-explain>
                      </div>
                  </div>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="userName">
                <span>
                  管理员账号
                  <i nz-icon nz-tooltip nzTitle="例：公司简称+字母 = chipjet_wpd" type="question-circle" theme="outline"></i>
                </span>
              </nz-form-label>
              <nz-form-control [nzSm]="18" [nzXs]="24">
                  <div nz-row [nzGutter]="8">
                      <div nz-col [nzSpan]="24">
                        <input type="text" nz-input formControlName="userName" (focus)="usernameOnFocus()" (blur)="checkUser()" placeholder="请输入6-14位字母或数字组合">
                      </div>
                      <div nz-col [nzSpan]="9" style="margin-left:-125px;">
                        <nz-form-explain  style="margin-top: 9px;" *ngIf="validateForm.get('userName').dirty && validateForm.get('userName').errors">请输入账号!</nz-form-explain>
                        <nz-form-explain  style="margin-top: 9px;" class="checkResult" *ngIf="checkUsername==601">该账号已被占用!</nz-form-explain>
                        <nz-form-explain  style="margin-top: 9px;" class="checkResult" *ngIf="checkUsername==-1">账号格式不正确!</nz-form-explain>
                      </div>
                  </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">设置密码</nz-form-label>
              <nz-form-control [nzSm]="18" [nzXs]="24">
                  <div nz-row [nzGutter]="8">
                      <div nz-col [nzSpan]="24">
                        <input type="password" nz-input formControlName="password" placeholder="请输入密码">
                      </div>
                      <div nz-col [nzSpan]="9" style="margin-left:-125px;">
                        <nz-form-explain style="margin-top: 9px;" *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码!</nz-form-explain>
                      </div>
                  </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="checkPassword">确认密码</nz-form-label>
              <nz-form-control [nzSm]="18" [nzXs]="24">
                  <div nz-row [nzGutter]="8">
                      <div nz-col [nzSpan]="24">
                        <input nz-input type="password" formControlName="checkPassword" id="checkPassword" placeholder="请再输入一次密码">
                      </div>
                      <div nz-col [nzSpan]="9" style="margin-left:-125px;">
                        <nz-form-explain style="margin-top: 9px;" *ngIf="validateForm.get('checkPassword').dirty && validateForm.get('checkPassword').errors">
                          <ng-container *ngIf="validateForm.get('checkPassword').hasError('required')">
                            请再输入密码!
                          </ng-container>
                          <ng-container *ngIf="validateForm.get('checkPassword').hasError('confirm')">
                            两次输入密码不一致!
                          </ng-container>
                        </nz-form-explain>
                      </div>
                  </div>
              </nz-form-control>
            </nz-form-item>
            
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="captcha">验证码</nz-form-label>
                <nz-form-control [nzSm]="18" [nzXs]="24">
                  <div nz-row [nzGutter]="8">
                    <div nz-col [nzSpan]="18">
                        <div nz-col [nzSpan]="24" style="margin-left: -4px;">
                          <input nz-input formControlName="captcha" id="captcha" (focus)="cancelErrorTips()" placeholder="请输入验证码">
                        </div>
                        <div nz-col [nzSpan]="12" style="margin-left:-115px;">
                            <nz-form-explain style="margin-top:9px;" *ngIf="validateForm.get('captcha').dirty && validateForm.get('captcha').errors">请输入验证码!</nz-form-explain>
                        </div>
                    </div>
                    <div nz-col [nzSpan]="6">
                        <img class="codeImg" (click)="changeCode()" [src]="codeUrl" />
                    </div>
                  </div>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item *ngIf="errorTips">
              <nz-form-control class="errorTips">
                  {{errorTips}}
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-control>
                <button nz-button class="login-form-button" [nzLoading]="btn_loading" [nzSize]="'large'" [nzType]="'primary'" (click)="regiter()">立即注册</button>
                <a href="" routerLink="/login" style="float:left;"><span style="color:rgba(0,0,0,.65);">已有账号？</span>登录</a>
              </nz-form-control>
            </nz-form-item>
          </form>
      </div>
  </div>
  <div class="footer">
      智管印打印服务管理平台
  </div>
</div>


